// 购物车的逻辑代码
// 因为我们是本地模拟, 我们自己准备一个数据
var goods = [
    { id: 1, pic: 'https://imgcdn.wsy.com/v/819784/20211203/dfe98664392221e6e8c2b3563a73b17b.jpg_80x80.jpg', price: 45, number: 15, buy: 1, is_select: false , },
    
  ]
  
  
  // 开始实现
  /*
    分析:
      1. 打开页面, 需要根据 goods 数组把购物车渲染出来 center 部分
        + 根据每一条数据的 is_select 计算一共购买了多少件
        + 根据每一条数据的 is_select 计算总价
        + 根据每一条数据的 is_select 决定 几个按钮是否有 disabled 属性
      2. 每一次的修改(选中状态, 购买数量, 删除, ...)
        + 都需要将数据修改
        + 然后使用最新的 goods 从新渲染页面
        + 根据每一条数据的 is_select 计算一共购买了多少件
        + 根据每一条数据的 is_select 计算总价
        + 根据每一条数据的 is_select 决定 几个按钮是否有 disabled 属性
      结论:
        + 可以书写一个渲染页面的函数
          => 把 center 位置渲染了
          => 把所有需要渲染的位置都选中了
  */
  
  
  // 0. 获取元素
  // 0-1. 获取 center 元素
  var centerBox = document.querySelector('.center')
  // 0-2. 全选按钮
  var allBtn = document.querySelector('.selectAll')
  // 0-3. 获取 bottom 元素
  var bottomBox = document.querySelector('.bottom')
  // 0-4. 获取 content 元素
  var contentBox = document.querySelector('.content')
  
  // 1. 渲染页面
  bindHtml()
  function bindHtml() {
    // 1-1. 根据 goods 把 centerBox 内的 li 组装出来
    var str = ``
    goods.forEach(function (item) {
      str += `
        <li>
          <div class="select">
            <input data-id="${ item.id }" class="selectItem" type="checkbox" ${ item.is_select ? 'checked' : '' }>
          </div>
          <div class="show">
            <img src="${ item.pic }" alt="">
          </div>
          <div class="desc">
            蓝色加绒s
          </div>
          <div class="price">
            ￥ ${ item.price.toFixed(2) }
          </div>
          <div class="total">
            <button data-id="${ item.id }" class="sub">-</button>
            <input type="text" value="${ item.buy }">
            <button data-id="${ item.id }" class="add">+</button>
          </div>
          <div class="subPrice">
            ￥ ${ (item.price * item.buy).toFixed(2) }
          </div>
          <div class="destory">
            <button data-id="${ item.id }" class="del">删除</button>
          </div>
        </li>
      `
    })
  
    // 1-2. 把 str 插入到指定位置
    centerBox.innerHTML = str
  
    // 1-3. 根据选中的数量决定全选按钮是否选中
    // 如果 goods 内所有的数据的 is_select 都是 true, 那么全选选中
    // 否则全选不选中
    var selectAll = goods.every(function (item) { return item.is_select === true })
    allBtn.checked = selectAll
  
    // 1-4. 计算出总价格和总件数和选中的数量
    // 渲染在指定的位置
    var totalNum = 0
    var totalPrice = 0
    var totalSelect = 0
    goods.forEach(function (item) {
      // 每一件都加上, 只有 isSelect 为 true 的时候才加上
      if (item.is_select === true) {
        totalNum += item.buy
        totalPrice += item.price * item.buy
        totalSelect++
      }
    })
  
    // 1-5. 渲染购物车底部内容
    bottomBox.innerHTML = `
      <p>共购买 <span>${ totalNum }</span> 件商品</p>
      <div>
        <button class="clear">清空购物车</button>
        <button class="delAll" ${ totalSelect === 0 ? 'disabled' : '' }>删除所有已选中</button>
        <button class="list">继续购买</button>
        <button data-price="${ totalPrice }" class="pay" ${ totalSelect === 0 ? 'disabled' : '' }>去支付</button>
      </div>
      <p>共计: ￥ <span>${ totalPrice.toFixed(2) }</span></p>
    `
  }
  
  
  // 2. 点击事件
  // 因为所有的操作都是点击事件
  // 并且他们还拥有共同的父级结构
  // 绑定事件的量也比较大
  // 没有比事件委托更合适的选择了
  contentBox.onclick = function (e) {
    // 处理事件对象兼容
    e = e || window.event
    // 处理事件目标兼容
    var target = e.target || e.srcElement
  
    // 判断你的 target 点击的是哪一个元素了
    // 2-1. 判断全选按钮
    if (target.className === 'selectAll') {
      // 拿到自己是选中还是未选中
      var type = target.checked
      // 把 goods 内所有数据的 is_select 改变成和自己一样
      goods.forEach(function (item) { item.is_select = type })
      // 渲染页面
      bindHtml()
    }
  
    // 2-2. 判断点击的是每一项的单选
    if (target.className === 'selectItem') {
      // 拿到我需要修改的是哪一条数据
      // 因为每一条数据有一个自己的 id
      // 我渲染页面的时候, 把 数据的 id 直接以自定义属性的形式渲染上
      // console.log(target)
      // 拿到元素身上记录的自定义属性
      var id = target.dataset.id - 0
      // console.log(id)
      // 从 goods 中找到 id 对应的哪一条数据
      // 查找 goods 中 和 我的 id 变量一样的哪一条
      // 课件第二周第二天下午, 数组常用方法4.html 19
      var info = goods.find(function (item) { return item.id === id })
      // 把当前这条数据的内 is_select 修改掉
      info.is_select = !info.is_select
      // 渲染页面
      bindHtml()
    }
  
    // 2-3. 判断点击的是 减号
    if (target.className === 'sub') {
      // console.log('数量减少')
      // 需要知道我点击的这个 减号 是属于哪一个数据的 减号
      // 拿到元素身上记录的 id
      var id = target.dataset.id - 0
      // 找到对应的数据
      var info = goods.find(function (item) { return item.id === id })
      // 判断一下, 如果目前的 buy 为 1, 那么什么都不做
      if (info.buy <= 1) return
      // 修改购买数量
      info.buy--
      // 渲染页面
      bindHtml()
    }
  
    // 2-4. 判断点击的是 加号
    if (target.className === 'add') {
      // console.log('数量增加')
      // 拿到元素身上记录的 id
      var id = target.dataset.id - 0
      // 找到对应的数据
      var info = goods.find(function (item) { return item.id === id })
      // 判断, 别超过最多数量
      if (info.buy >= info.number) return
      // 修改购买数量
      info.buy++
      // 渲染页面
      bindHtml()
    }
  
    // 2-5. 判断点击的是删除按钮
    if (target.className === 'del') {
      // console.log('删除')
      // 拿到元素身上记录的 id
      var id = target.dataset.id - 0
      // 把 goods 内 id 一样的哪一条删除
      // 利用 filter 删除, 过滤出 id 不一样的数据
      goods = goods.filter(function (item) { return item.id !== id })
      // 渲染页面
      bindHtml()
    }
  
    // 2-6. 判断点击的是清空购物车
    if (target.className === 'clear') {
      // console.log('清空购物车')
      // 把 goods 变成一个 空数组
      goods = []
      // 渲染页面
      bindHtml()
    }
  
    // 2-7. 判断删除所有已选中
    if (target.className === 'delAll') {
      // console.log('删除所有已选中')
      // 把 goods 中所有 is_select 为 true 的删除
      // 把 goods 中所有 is_select 为 false 的留下
      goods = goods.filter(function (item) { return item.is_select === false })
      // 渲染页面
      bindHtml()
    }
  
    // 2-8. 判断继续购买
    if (target.className === 'list') {
      // console.log('继续去购买')
      window.location.href = ''
    }
  
    // 2-9. 判断支付
//     if (target.className === 'pay') {
//       // console.log('去支付')
//       // 拿到元素身上的price 自定义属性
//       var price = target.dataset.price - 0
  
//       // 提示用户支付多少钱就可以了
//       do {
//         var res = prompt(`共计 ${ price.toFixed(2) } 元, 请输入银行卡密码 ! ^_^ `)
//       } while (res !== '123456')
  
//     }
//   }
  }